<template>
  <div class="seach-card">
    <img src="/logo.png" class="logo" />
    <input
      v-model="keyword"
      @input="handleSearch"
      @focus="isShowPanel = true"
      type="text"
      id="tipinput"
      placeholder="搜索位置、公交站、地铁站"
    />
    <i class="iconfont icon-search"></i>
    <div class="navi">
      <img src="/navi.png" />
    </div>
    <Transition>
      <SearchPanel v-if="isShowPanel && !tipList" />
    </Transition>
  </div>
  <SearchTip v-if="!isShowPanel && tipList" :tipList="tipList" class="tips"></SearchTip>
</template>

<script setup>
import { ref, inject } from 'vue'
import { debounce } from 'lodash-es'
// const map = inject('map')
const AMap = inject('AMap')

//控制搜索面板
const isShowPanel = ref(false)

//输入框的关键词
let keyword = ref(null)
let autoComplete = ref(null)

//装提示
let tipList = ref(null)

// let center = ref(null)

const handleSearch = debounce(async () => {
  isShowPanel.value = false
  autoComplete.value = new AMap.value.Autocomplete()

  autoComplete.value.search(keyword.value, (status, result) => {
    console.log(result)
    tipList.value = result.tips
  })
}, 1000)
</script>

<style lang="scss" scoped>
.seach-card {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 10px;
  left: 10px;
  width: 360px;
  height: 45px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  background: #fff;
  border-radius: 3px;
  .logo {
    width: 34px;
    height: 34px;
    margin-left: 10px;
  }
  input {
    border: 0px;
    outline: none;
  }
  i {
    font-size: 20px;
    color: #999;
    margin-left: 20px;
  }
  .navi {
    position: relative;
    width: 45px;
    height: 45px;
    background: #eee;
    img {
      position: absolute;
      width: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.tips {
  position: fixed;

  top: 56px;
  left: 10px;
}

.v-enter-active {
  transition: all 0.5s ease;
}
.v-leave-active {
  transition: all 0.8s ease;
}

.v-enter-from,
.v-leave-to {
  transform: translateY(-200px);
  opacity: 0;
}
</style>
